// 来到编辑文章页面的时候，到底是需要修改哪一篇文章呢？
// 地址中的id ==> 借助于 location.search

// console.log(location.search) // ?id=3335
// console.log(location.search.split('?id=')) // ['', '3335']
// console.log(location.search.split('?id=')[1]) // 3335

const form = layui.form
const id = location.search.split('?id=')[1]

// ====================== 富文本编辑器的代码 ======================
const E = window.wangEditor
const editor = new E('#contentBox')
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 1
editor.create()

// ====================== 封面的裁切效果 ======================
// 1. 获取裁剪区域的 DOM 元素
let $image = $('.container img')

// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview',
}

// 所有下拉框的数据 先发这个请求，再发文章详情的接口请求
axios.get('/my/article/cates').then(({ data: { data } }) => {
    let newArr = data.map(
        ({ Id, name }) => `<option value="${Id}">${name}</option>`
    )
    $('[name=cate_id]').append(newArr.join(''))

    // 手动渲染更新
    form.render()

    // 文章详情
    axios
        .get('/my/article/' + id)
        .then(({ data: { data, message, status } }) => {
            console.log(data)

            // 给表单赋值
            // formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            form.val('form', data)

            // 使用 editor.txt.html(...) 设置编辑器内容。
            editor.txt.html(data.content)

            // 3. 初始化裁剪区域 ==> 换封面
            $image
                .attr(
                    'src',
                    'http://api-breakingnews-web.itheima.net' + data.cover_img
                )
                .cropper(options)
        })
})

// ====================== 点击 ·选择封面· 弹出框，用户选择文件 ======================
$('#btnChooseCoverImage').on('click', function () {
    $('#fileCover').click()
})

// ====================== 给文件域注册change事件, 更换裁切区域的图片 ======================
$('#fileCover').on('change', function () {
    // 获取用户选择的文件
    let file = this.files[0]
    // console.log(file);

    if (!file) {
        return layer.msg('请选择图片')
    }

    // 将文件对象转成地址
    let imgSrc = URL.createObjectURL(file)
    // console.log(imgSrc);

    // 先销毁裁切区域， 在设置图片的src，在重新渲染
    $image.cropper('destroy').attr('src', imgSrc).cropper(options)
})

// =============== 决定文章的状态是已发布，还是草稿 ===============
let state // 变量state 来存储文章的状态（已发布、草稿）
$('#btnPublish').on('click', function () {
    state = '已发布'
})

$('#btnSave').on('click', function () {
    state = '草稿'
})

// =============== 获取表单数据，ajax提交数据 ===============
$('#form').on('submit', function (e) {
    e.preventDefault()

    // 收集表单数据 ==> 接口要求的是 FormData格式数据 （内容 + 封面没有收集到，所以后续通过append来追加）
    let fd = new FormData(this)
    // console.log(fd)

    // 对于FormData收集不到的数据， 可以使用append方法进行追加
    // 语法： fd.append(name, value);

    // 收集到了富文本编辑器内容
    //  editor.txt.html() ==> 可以获取到富文本编辑器的内容（带标签）
    // console.log(editor.txt.html());
    fd.append('content', editor.txt.html())

    // 收集文章的状态
    fd.append('state', state)

    // 收集文章id
    fd.append('Id', id)

    // 处理封面
    $image
        .cropper('getCroppedCanvas', {
            // 创建一个 Canvas 画布
            width: 400,
            height: 280,
        })
        .toBlob(function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据

            // 追加封面数据
            fd.append('cover_img', blob)

            // 把所有的数据都收集到了，才发ajax请求
            axios.post('/my/article/edit', fd).then(({ data: { status } }) => {
                if (status !== 0) {
                    // 发布失败
                    return layer.msg('更新文章失败')
                }

                layer.msg(
                    '更新文章成功',
                    {
                        time: 1500, //2秒关闭（如果不配置，默认是3秒）
                    },
                    function () {
                        // 关闭后想做些什么
                        // 跳转页面
                        location.href = '/article/art_list.html'
                    }
                )
            })
        })
})
